import React from 'react'
import {
  Modal,
  Form,
  Row,
  Col,
  Select,
  Upload,
  Button,
  message,
  Cascader,
} from 'antd'
import axios from 'axios'
import { checkres, session } from 'utils'
import { UploadOutlined } from '@ant-design/icons'
import { SERVER } from 'configs/service'

const { Option } = Select

export default function ModalEdit(props) {
  const { visible, onCancel, onOk, mode, record, regionData = [] } = props
  const [loading, setLoading] = React.useState(false)
  const [fileList, setFileList] = React.useState([])
  const [form] = Form.useForm()

  React.useEffect(() => {
    if (!visible) return
    switch (mode) {
      case 'add':
        {
          form.resetFields()
          setFileList([])
        }
        break
      case 'update':
        {
          form.setFieldsValue({
            ...record,
          })
          record.chipFile
            ? setFileList([
                {
                  uid: '1',
                  name: '芯片资质文件',
                  status: 'done',
                  url: `${SERVER}/uploadFile/base64Read?id=${record.chipFile}&Authorization=${session.Authorization}`,
                  response: {
                    data: record.chipFile,
                  },
                },
              ])
            : setFileList([])
        }
        break
    }
  }, [visible])

  function onSubmit() {
    form.validateFields().then(fields => {
      setLoading(true)
      fields.chipFile = fileList.length > 0 ? fileList[0].response.data : ''
      if (mode === 'update') fields.id = record.id
      axios
        .post(`/chip/${mode}`, {
          ...fields,
        })
        .then(res => {
          setLoading(false)
          if (!checkres(res)) return
          message.success(`${mode === 'update' ? '修改' : '新增'}成功`)
          onCancel()
          onOk()
        })
    })
  }

  const handleChange = info => {
    let fileList = [...info.fileList]
    fileList = fileList.slice(-1)
    fileList = fileList.map(file => {
      if (file.response) {
        file.url = file.response.url
      }
      return file
    })
    setFileList(fileList)
  }

  return (
    <Modal
      visible={visible}
      title={mode === 'add' ? '新增芯片型号' : '修改芯片型号'}
      confirmLoading={loading}
      onCancel={onCancel}
      width={720}
      maskClosable={false}
      footer={[
        <Button key="cancel" onClick={onCancel}>
          取消
        </Button>,
        <Button
          key="submit"
          type="primary"
          loading={loading}
          onClick={onSubmit}
        >
          保存
        </Button>,
      ]}
    >
      <Form form={form} wrapperCol={{ span: 15 }} labelCol={{ span: 5 }}>
        <Row>
          <Col span={24}>
            <Form.Item
              name="isG5G6"
              label="排放类型"
              rules={[{ required: true, message: '排放类型为必填' }]}
            >
              <Select>
                <Option key="5" value="5">
                  国五
                </Option>
                <Option key="a" value="a">
                  国六
                </Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              name="areaIds"
              label="所属区域"
              rules={[{ required: true, message: '供应商为必填' }]}
            >
              <Cascader options={regionData} />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item
              name="fileId"
              label="展示图片"
              rules={[{ required: false, message: '展示图片为必填' }]}
            >
              <Upload
                headers={{ Authorization: session.Authorization }}
                className="avatar-uploader"
                accept="image/png,image/jpg,image/jpeg,.pdf"
                showUploadList={true}
                action={`${SERVER}/uploadFile/base64Upload`}
                fileList={fileList}
                onChange={handleChange}
              >
                <Button>
                  <UploadOutlined /> 上传文件
                </Button>
              </Upload>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}
